<script setup lang="ts">
// const prop = defineProps<{
//   name: string
//   age?: number
//   male: boolean
// }>()

// 可设置默认值
const prop = withDefaults(defineProps<{ name?: string; money?: number }>(), {
  name: 'rose',
  money: 20,
})

// 子传父
//  1. 定义emits 子传父方法， 绑定事件名字
const emit = defineEmits<{
  (e: 'changeMoney', money: number): void
}>()

// 逻辑代码中使用父组件传过来的数据，需要通过点语法使用
console.log(prop.name)
</script>

<template>
  <h2>
    我是子组件
    <p>{{ name }}</p>
    <p>{{ money }}</p>
    <!-- 2. 绑定触发事件 -->
    <button @click="$emit('changeMoney', 800)">按我向老爹要钱</button>
  </h2>
  <!--  结构中使用， 直接使用 -->
</template>

<style scoped>
h2 {
  width: 200px;
  height: 400px;
  background-color: skyblue;
}
</style>
